---
import { Image } from 'astro:assets';

export interface Props {
  icon:ImageMetadata; 
  title: string;
  desc: string;
  href?: string;
}
const { icon, title, desc, href } = Astro.props;
---
<style>
.quick-nav-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 4px 32px 0 rgba(0,0,0,0.08);
  padding: 28px 32px 24px 28px;
  transition: box-shadow 0.18s, background 0.18s;
  cursor: pointer;
  min-width: 320px;
  min-height: 50px;
  border: 1.5px solid transparent;
}

.quick-nav-card:hover {
  background: #f5faff;
  box-shadow: 0 8px 32px 0 rgba(0,112,243,0.10);
  border: 1.5px solid #b3d8fd;
}

.quick-nav-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f5f6fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}

.quick-nav-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quick-nav-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: #2d3559;
  margin-bottom: 6px;
}

.quick-nav-desc {
  font-size: 1.05rem;
  color: #5a6987;
  line-height: 1.6;
}
</style>
{href ? (
  <a class="quick-nav-card" href={href} tabindex="0">
    <Image src={icon} alt={`${title} icon`} width={48} height={48} />
    <span class="quick-nav-content">
      <span class="quick-nav-title">{title}</span>
      <span class="quick-nav-desc">{desc}</span>
    </span>
  </a>
) : (
  <div class="quick-nav-card">
    <Image src={icon} alt={`${title} icon`} width={48} height={48} />
    <span class="quick-nav-content">
      <span class="quick-nav-title">{title}</span>
      <span class="quick-nav-desc">{desc}</span>
    </span>
  </div>
)}